React Native এ ScrollView এবং FlatList দুটি গুরুত্বপূর্ণ কম্পোনেন্ট যা লম্বা বা স্ক্রলযোগ্য লিস্ট বা কন্টেন্ট দেখানোর জন্য ব্যবহৃত হয়। ScrollView সাধারণত একটি স্ট্যাটিক বা ছোট স্ক্রলযোগ্য কন্টেন্টের জন্য ব্যবহৃত হয়, যেখানে FlatList বড় বা ডাইনামিক ডেটা লিস্টে পারফরম্যান্স উন্নতির জন্য ব্যবহৃত হয়।
নিচে ScrollView এবং FlatList দিয়ে ডায়নামিক UI তৈরির উদাহরণ দেওয়া হলো:
১. ScrollView দিয়ে ডায়নামিক UI তৈরি
ScrollView ব্যবহৃত হয় একটি স্ক্রলযোগ্য ভিউ তৈরি করতে, যেখানে সাধারণত অনেক কন্টেন্ট থাকে যা স্ক্রল করে দেখা যায়। এটি ব্যবহার করে আপনি দীর্ঘ তালিকা বা কন্টেন্ট স্ক্রল করতে পারেন।
import React from 'react';
import { ScrollView, Text, View, StyleSheet } from 'react-native';
const App = () => {
return (
<ScrollView style={styles.container}>
<View style={styles.section}>
<Text style={styles.title}>Section 1</Text>
<Text style={styles.content}>This is some content for section 1.</Text>
</View>
<View style={styles.section}>
<Text style={styles.title}>Section 2</Text>
<Text style={styles.content}>This is some content for section 2.</Text>
</View>
<View style={styles.section}>
<Text style={styles.title}>Section 3</Text>
<Text style={styles.content}>This is some content for section 3.</Text>
</View>
{/* Add more sections as needed */}
</ScrollView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: 20,
},
section: {
padding: 20,
marginBottom: 20,
backgroundColor: '#f4f4f4',
},
title: {
fontSize: 18,
fontWeight: 'bold',
},
content: {
fontSize: 16,
},
});
export default App;বিস্তারিত ব্যাখ্যা:
- এখানে,
ScrollViewদিয়ে কয়েকটিViewকম্পোনেন্ট তৈরি করা হয়েছে যা স্ক্রলযোগ্য। - আপনি যেকোনো কন্টেন্ট, যেমন টেক্সট, ইমেজ, বা অন্যান্য কম্পোনেন্ট
ScrollViewএর মধ্যে রাখতে পারেন।
২. FlatList দিয়ে ডায়নামিক UI তৈরি
FlatList কম্পোনেন্ট ডাইনামিকভাবে লম্বা ডেটা লিস্ট রেন্ডার করার জন্য উপযুক্ত, বিশেষত যখন ডেটা বড় হয় বা লিস্টের আইটেমগুলো বারবার পরিবর্তিত হয়।
import React from 'react';
import { FlatList, Text, View, StyleSheet } from 'react-native';
const App = () => {
// Sample data for the FlatList
const data = [
{ id: '1', title: 'Item 1' },
{ id: '2', title: 'Item 2' },
{ id: '3', title: 'Item 3' },
{ id: '4', title: 'Item 4' },
{ id: '5', title: 'Item 5' },
{ id: '6', title: 'Item 6' },
// Add more items as needed
];
return (
<FlatList
data={data}
renderItem={({ item }) => (
<View style={styles.item}>
<Text style={styles.title}>{item.title}</Text>
</View>
)}
keyExtractor={(item) => item.id}
/>
);
};
const styles = StyleSheet.create({
item: {
padding: 20,
borderBottomWidth: 1,
borderBottomColor: '#ccc',
},
title: {
fontSize: 18,
},
});
export default App;বিস্তারিত ব্যাখ্যা:
FlatListডাইনামিক ডেটা রেন্ডার করার জন্য ব্যবহৃত হয়, যা অ্যাপ্লিকেশনের পারফরম্যান্স উন্নত করতে সাহায্য করে।renderItemপ্রোপার্টির মাধ্যমে প্রতিটি আইটেমের কনটেন্ট রেন্ডার করা হয়।keyExtractorপ্রোপার্টির মাধ্যমে প্রতিটি আইটেমের জন্য একটি ইউনিক কী নির্ধারণ করা হয়।
ScrollView এবং FlatList এর মধ্যে পার্থক্য
- পারফরম্যান্স:
- ScrollView: এটি সমস্ত কন্টেন্ট একসাথে রেন্ডার করে, যার ফলে এটি বড় ডেটা সেটে পারফরম্যান্স সমস্যা সৃষ্টি করতে পারে।
- FlatList: এটি শুধুমাত্র দৃশ্যমান আইটেমগুলো রেন্ডার করে, ফলে বড় ডেটা সেটে পারফরম্যান্স অনেক উন্নত থাকে।
- ব্যবহার:
- ScrollView: ছোট স্ক্রলযোগ্য কন্টেন্ট বা লেআউটের জন্য উপযুক্ত, যেখানে সমস্ত কন্টেন্ট একসাথে দেখানো হয়।
- FlatList: বড় ডেটা লিস্ট, যেমন অ্যারে বা লিস্ট, রেন্ডার করতে ব্যবহার করা হয় এবং এটি বড় ডেটাতে ভালো পারফরম্যান্স দেয়।
সারাংশ
- ScrollView সাধারণত ছোট স্ক্রলযোগ্য কন্টেন্ট বা লেআউটের জন্য উপযুক্ত, যেখানে FlatList বড় ডাইনামিক ডেটা লিস্টের জন্য ব্যবহার করা হয়।
- FlatList বড় ডেটাতে পারফরম্যান্স উন্নত করতে সাহায্য করে কারণ এটি শুধুমাত্র দৃশ্যমান আইটেমগুলো রেন্ডার করে।
- ScrollView সাধারণত ছোট স্ক্রলেবল কন্টেন্টের জন্য, যেখানে সমস্ত কন্টেন্ট একসাথে রেন্ডার হয়, ব্যবহৃত হয়।
Content added By
Read more
